<template>
	<div class="mapbox2">

		<el-carousel :interval="4000" type="card" width='400px' height="800px">
			<el-carousel-item v-for="(item,index) in datas" :key="index">
				<img class='imgUrl' :src="item.src" alt="" />
			</el-carousel-item>
		</el-carousel>
	</div>

</template>
<script type="text/javascript">
	export default {
		name: 'SowingMap2',
		data() {
			return {
				datas: [{
						src: "../../../../static/imgs/img2/mj1.png",

					},
					{
						src: "../../../../static/imgs/img2/mj2.png",

					},
					{
						src: "../../../../static/imgs/img2/mj3.png",

					}
				]
			}
		}
	}
</script>

<style>
	.el-carousel {
		width: 1300px;
		margin-left: 308px;
		border-radius: 10px;
	}
	
	.el-carousel__item h3 {
		color: #475669;
		font-size: 14px;
		opacity: 0.75;
		line-height: 200px;
		margin: 0;
	}
	
	
	.mapbox2 .el-carousel__indicator {
		border-radius: 50%;
		width: 12px;
		height: 12px;
		padding: 0px;
		margin-right: 16px;
		background-color: #868686;
	}
	.mapbox2 .el-carousel__indicator button{
		display:none;
	}
	
	.mapbox2 .el-carousel__indicator.is-active {
		background-color: #F5855F;
	}
	
	.el-carousel__item:nth-child(2n) {
		border-radius: 20px;
		background-color: #EAEAEA;
	}
	
	.el-carousel__item:nth-child(2n+1) {
		background-color: #EAEAEA;
		border-radius: 20px;
	}
	
	.imgUrl {
		width: 100%;
		height: 100%;
	}
</style>